<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="main">
            <div class="title">批量发送</div>
            <div class="form">
              <form id="from">
                <div class="item">
                  <label>短信签名:</label>
                  <input type="text" :value="sign" ref="sign">
                  <span>规则：1.签名格式为3-7汉字，例如：【爱闪信】2.签名会自动添加在短信开头3.签名也会占用闪信字数，请注意长度</span>
                </div>
                <div class="item">
                  <label>手机号码:</label>
                  <textarea cols="84" rows="10" :value="sender" ref="_phone"></textarea>
                  <span class="phoneRule">规则：请输入手机号码，例如 13810106688，每个手机号一行</span>
                </div>
                <div class="item">
                  <label>短信模板:</label>
                  <el-button type="primary" plain class="moudle" @click="openHTML">点击选择短信模板</el-button>
                </div>
                <div class="item">
                  <label>短信内容:</label>
                  <div v-html="message" class="message" ref="message"></div>
                  <span
                    class="phoneRule"
                  >规则：每67个字计费一条（含签名），正文部分无需再添加签名。注意：请不要在闪信正文中使用【】符号，此符号仅限签名使用，在正文使用可能会导致短信内容丢失</span>
                </div>
                <div class="item">
                  <el-checkbox v-model="checked">定时发送</el-checkbox>
                  <el-date-picker v-model="value" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </div>
                <el-button type="primary" @click="submit">确认并提交发送短信</el-button>
              </form>
            </div>
            <div class="notice">
              <h2>提交前请仔细阅读以下须知</h2>
              <p>1.闪信发送内容基于已有“模板”，如需发送营销、推广类短信请联系售后客服增加自定义模板。经审核通过的自定义模板才可使用。</p>
              <p>2.【】符号仅限签名使用，短信禁止出现多个签名，在短信正文中使用签名符号可能会导致短信内容缺失，请注意。</p>
              <p>3.请在大批量的短信发送之前进行单条测试，成功接收并确认内容无误后再进行发送。</p>
              <p>4.根据《中华人民共和国互联网信息管理办法》规定，禁止发送包含下列内容的短信（含闪信）</p>
              <p>(一)反对宪法所确定的基本原则的；</p>
              <p>(二)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</p>
              <p>(三)损害国家荣誉和利益的；</p>
              <p>(四)煽动民族仇恨、民族歧视，破坏民族团结的；</p>
              <p>(五)破坏国家宗教政策，宣扬邪教和封建迷信的；</p>
              <p>(六)散布谣言，扰乱社会秩序，破坏社会稳定的；</p>
              <p>(七)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</p>
              <p>(八)侮辱或者诽谤他人，侵害他人合法权益的；</p>
              <p>(九)含有法律、行政法规禁止的其他内容的。</p>
              <p>一经发现，我们将会立即关停您的账户（余额不予退还），并保留移送公安司法机关及追究法律责任的权利！</p>
            </div>
            <div class="table" v-if="onOff">
              <el-table
                :data="tableData"
                height="250"
                border
                @row-click="handle"
                :show-header="false"
                :cell-style="{'text-align':'center','cursor':'pointer'}"
                style="width: 100%"
              >
                <el-table-column prop="sortIndex" label="编号" width="80"></el-table-column>
                <el-table-column label="模板" prop="templateDemo"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getCookie } from "./until/index";
export default {
  data() {
    return {
      key1: "",
      key2: "",
      sign: "【】",
      sender: "",
      message: "",
      msgContent: "",
      checked: false,
      value: "",
      onOff: false,
      templateCode: "",
      tableData: []
    };
  },
  created() {
    this.$ajax
      .get(
        "getSmsTemplateList.ashx?userId=" +
          getCookie("userid") +
          "&token=" +
          getCookie("token")
      )
      .then(res => {
        if (res.data.code === "200") {
          var data = res.data.data;
          this.tableData = data.templateList;
        } else {
          this.$message.error(res.data.msg + "请退出后重新登录");
        }
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    // 选择短信模板
    openHTML() {
      this.onOff = true;
      this.sign = this.$refs.sign.value;
      this.sender = this.$refs._phone.value;
    },
    handle(row) {
      var message = row.templateContent;
      var reg = /[^$\x22]+/gi;
      var result = message.match(reg);

      if (result.length > 1) {
        var tels = result[1];
        result[1] = `<input type='text' name=${tels} autofocus="autofocus"  style="margin: 0 6px;width:80px" />`;
        if (result.length > 3) {
          var phones = result[3];

          result[3] = `<input type='text' name=${phones} style="margin: 0 6px;width:80px"/>`;
        }
      }

      this.templateCode = row.templateCode;
      this.msgContent = message;
      this.message = result.join("");
      this.onOff = false;
    },
    submit() {
      if (this.$refs.message.children.length > 0) {
        this.key1 = this.$refs.message.children[0].name;
        var telCon = this.$refs.message.children[0].value;
        this.key2 =
          this.$refs.message.children[1] && this.$refs.message.children[1].name;
        var phoneCon =
          this.$refs.message.children[1] &&
          this.$refs.message.children[1].value;
      }

      var jsonvalue = {};
      if (this.key1) {
        jsonvalue[this.key1] = telCon;
      }

      if (this.key2) {
        jsonvalue[this.key2] = phoneCon;
      }
      var templateValue = JSON.stringify(jsonvalue);

      var phone = this.$refs._phone.value; //接收短信手机号
      phone = phone.replace(/\n/g, ";");

      var msgContent = this.msgContent; //短信模板内容

      var msgSignature = this.$refs.sign.value; //短信签名

      var reg = new RegExp("【([\u4E00-\u9FA5]{3,7})】", "g"); //签名 3-7个中文汉字
      var signBoole = reg.test(msgSignature); //验证短信签名

      var templateCode = this.templateCode; //短信模板编号

      if (this.checked && this.value) {
        var time = this.value;

        var sendTime =
          time.toLocaleDateString().replace(/\//g, "-") +
          " " +
          time.toTimeString().substr(0, 8);
      } else {
        var sendTime = "";
      }

      if (!signBoole) {
        this.$message({
          message: "请仔细阅读签名规则，填写正确的签名",
          type: "warning"
        });
      } else if (!phone) {
        this.$message({
          message: "请填写要发送的手机号码",
          type: "warning"
        });
      } else if (!this.$refs.message.innerHTML) {
        this.$message({
          message: "请选择短信模板",
          type: "warning"
        });
      } else {
        this.$ajax
          .get(
            "sendSmsMessage.ashx?userId=" +
              getCookie("userid") +
              "&token=" +
              getCookie("token") +
              "&phoneNumber=" +
              phone +
              "&msgContent=" +
              msgContent +
              "&msgSignature=" +
              msgSignature +
              "&sendTime=" +
              sendTime +
              "&templateCode=" +
              templateCode +
              "&templateValue=" +
              templateValue
          )
          .then(res => {
            if (res.data.code === "200") {
              var data = res.data.data;
              this.$message({
                message: res.data.msg,
                type: "success"
              });
            } else if(res.data.code === "209"){
              this.$msgbox({
                title:'提示',
                message:'请先实名认证后再发送短信/闪信.',
                showCancelButton:true,
                cancelButtonText:'取消',
                confirmButtonText:'确定'
              })
              .then(()=>{
                this.$router.push({
                  path:'/verify'
                })
              })
              .catch(()=>{
                console.log('取消了')
              })
            }else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.el-main {
  background-color: #f0eff5;
  color: #333;
  text-align: center;
  height: 100%;
}
.main {
  width: 100%;
  position: relative;
}
.el-button {
  margin-left: 0;
}
.title {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
}
.message .coninp {
  margin: 0 10px;
  line-height: 30px;
}
.form {
  width: 100%;
  background: #fff;
  padding: 30px 0;
  display: table;
}
.message {
  float: left;
  width: 611px;
  height: 136px;
  border: 1px solid rgb(169, 169, 169);
  padding: 10px;
  box-sizing: border-box;
}
.moudle {
  width: 25%;
}
.table {
  width: 70%;
  height: 400px;
  z-index: 2018;
  position: absolute;
  top: 20%;
  left: 6%;
}
.item {
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
  clear: both;
  display: table;
}
.item label {
  margin-left: 80px;
  margin-right: 50px;
  float: left;
  line-height: 35px;
}
.el-input {
  margin-left: -20px;
}
.item input {
  width: 600px;
  height: 35px;
  line-height: 35px;
  padding-left: 10px;
}
.item textarea {
  float: left;
}
.item span {
  display: inline-block;
  margin-left: 190px;
  margin-top: 10px;
}
.item span.phoneRule {
  margin-left: 20px;
  width: 260px;
  margin-top: 0;
}
.notice {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  padding: 30px 0;
  background: #fff;
  text-align: left;
  text-indent: 2em;
  color: #666;
}
.notice h2 {
  margin-bottom: 30px;
}
.notice p {
  line-height: 25px;
}
</style>
  